---
title: Préservation expérimentale de l'ordre des scripts
sidebar:
  label: Préservation de l'ordre des scripts
i18nReady: true
---

import Since from '~/components/Since.astro'

<p>

  **Type :** `boolean`<br />
  **Par défaut :** `false`<br />
  <Since v="5.5.0" />
</p>

Restitue plusieurs balises `<style>` et `<script>` dans le même ordre que celui dans lequel elles ont été déclarées dans le code source.

Pour activer ce comportement, ajoutez l'option de fonctionnalité `experimental.preserveScriptOrder` à votre configuration Astro :

```js title="astro.config.mjs" ins={4-6}
import { defineConfig } from "astro/config"

export default defineConfig({
  experimental: {
    preserveScriptOrder: true
  }
})
```

## Utilisation

Cette option expérimentale ne nécessite aucune utilisation spécifique et affecte uniquement l'ordre dans lequel Astro restitue vos styles et scripts.

Lors du rendu de plusieurs balises `<style>` et `<script>` sur la même page, Astro inverse actuellement leur ordre dans le HTML généré. Cela peut produire des résultats inattendus, par exemple, des styles CSS remplacés par des balises de style précédemment définies lors de la création de votre site. Cette option expérimentale restitue quant à elle les balises `<script>` et `<style>` dans l'ordre dans lequel elles sont définies.

Par exemple, le composant suivant possède deux balises `<style>` et deux balises `<script>` :

```astro title="src/components/MyComponent.astro"
<p>Je suis un composant</p>
<style>
  body {
    background: red;
  }
</style>
<style>
  body {
    background: yellow;
  }
</style>
<script>
    console.log("hello")
</script>
<script>
    console.log("world!")
</script>
```

Après la compilation, le comportement par défaut d'Astro crée un style en ligne où `yellow` apparaît en premier, puis `red`. Cela signifie que l'arrière-plan `red` est appliqué. De même, avec les deux scripts, le mot `world!` est affiché en premier, suivi de `hello` :

```css
body {background:#ff0} body {background:red}
```

```js
console.log("world!")
console.log("hello")
```

Lorsque `experimental.preserveScriptOrder` est définie sur `true`, l'ordre de restitution des balises `<style>` et `<script>` correspond à leur ordre d'écriture. Pour le même composant d'exemple, le style généré `red` apparaît en premier, suivi de `yellow` ; pour les scripts, `hello` est affiché en premier, suivi de `world!` :

```css
body {background:red} body {background:#ff0}
```

```js
console.log("hello")
console.log("world!")
```

Dans une future version majeure, Astro conservera le style et l'ordre des scripts par défaut, mais vous pouvez opter pour le comportement futur plus tôt en utilisant l'option `experimental.preserveScriptOrder`.
